<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动模块的课程训练</title>
</head>
<body>

    <!-- 运动模块的课程训练模态框 -->

    <div class="mask dpflex fdcolumn" id="mask">
        <p>放弃可以找到一万个理由，坚持只需一个信念</p>

        <!-- 运动开始和结束 -->
        <div class="outDoor-status dpflex">
            <div class="outDoor-start dpflex fdcolumn" id="outDoor-start">
                <i class="iconfont icon-jixugongxiang"></i>
                <span>继续训练</span>
            </div>
            <div class="outDoor-stop dpflex fdcolumn" id="outDoor-stop">
                <i class="iconfont icon-jieshu"></i>
                    <span>结束训练</span>
            </div>
        </div>

        <!-- 运动项目信息 -->

        <div class="mask-infor dpflex">
            <div class="mask-infor1">
                <img alt="" id="imgUrl">
            </div>
            <div class="mask-infor2 dpflex ">
                <span>当前</span>
                <span id="title">胯关节环绕</span>
            </div>

        </div>


    </div>

    <div class="train">

            <!--课程训练图片  -->
            <div class="train-img dpflex ">
                <video id="videoUrl" muted autoplay></video>
                <div class="train-name">
                    <p class="dpflex">
                       <span id="trainNow">3</span>/<span id="trainNum">8</span> 
                    </p>
                    <span id="title">膝关节环绕</span>

                </div>
            </div>

            <!-- 上一曲和下一曲 -->
            <div class="train-listen dpflex">
                <p id="progress"></p>
                <i class="iconfont icon-next" id="listenPre"></i>  
                <i class="iconfont icon-zanting" id="train-stop"></i>  
                <i class="iconfont icon-next1" id="listenNext"></i>  

            </div>

    </div>

    
    
</body>
</html>